/* 
    Document   : mainPageCss
    Created on : 17-Oct-2009, 7:56:16 PM
    Author     : erico, Jun Chen
    Description:
        Purpose of the stylesheet follows.
*/

/* 
   z-index used by stat id element is obtained from this website
http://divitodesign.com/css/z-index-overlap-html-elements-with-css/
*/
div#mainShadeTop{
        height: 7px;
        width: 100%;
        background-image: url(GUI/images/shared/main_shade_top.png);
        position:absolute;
        margin-top:0px;
        z-index:27;
}

div#mainShadeBtn{
        height: 7px;
        width: 100%;
        background-image: url(GUI/images/shared/main_shade_btn.png);
        position:absolute;
        margin-top:643px;
        z-index:27;
}

div#loading_window{
	position:absolute;
        left:43%;
        margin-top:200px;
        z-index:30;
}
div#loading_window_bg {
    position:absolute;
	top: 0px;
        left: 0px;
	height: 100%;
	width: 100%;
    z-index:25;
}
#loading_screen {
    position:absolute;
    left:0%;
    margin-top:0px;
    width: 100%;
    height: 100%;
    z-index:30;
}
#loading_icon {
    position:absolute;
    left:45%;
    margin-top:250px;
}

#top_menu {
    position:absolute;
    left:39%;
    margin-top:18px;
    z-index:20;
}

#realtime_friends_list {
    position:absolute;
    left:82%;
    margin-top:182px;
    z-index:20;
}
#stat {
    position:absolute;
    left:82%;
    margin-top:28px;
    z-index:20;
}

#level_window {
    position:absolute;
    left:0%;
    margin-top:300px;
    z-index:20;
}

#game_control {
    position:absolute;
    left:45%;
    margin-top:500px;
    z-index:19;
}

#control {
    position:absolute;
    left:0px;
    top:0px;
}

#clue_control {
    position:absolute;
    left:56px;
    top:-6px;
}

#transportation {
    position:absolute;
    left:40%;
    margin-top:100px;
    z-index:19;
}

#acct_window {
    position:absolute;
    left:25%;
    margin-top:85px;
    z-index:19;
}

#clue_window {
    position:absolute;
    left:40%;
    margin-top:100px;
    z-index:19;
}

#game_start_window {
    position:absolute;
    left:40%;
    margin-top:100px;
    z-index:19;
}

#map_canvas {
    height:650px;
    width:100%;
}

.trans_window_data {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-style: normal;
    line-height: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    color: #333;
    text-decoration: none;
}
.status_window_time {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-style: normal;
    line-height: normal;
    font-variant: normal;
    text-transform: none;
    color: #FFF;
    text-decoration: none;
    font-weight: normal;
}
.status_window_data {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 17px;
    color: #999;
    font-style: normal;
    line-height: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    text-decoration: none;
}
div#tran_opt_frame {
    position: relative;
    width: 309px;
    height: 72px;
}
#trans_walk_data_first, #trans_bus_data_first, #trans_taxi_data_first, #trans_train_data_first {
	position: absolute;
	top: 11px;
	left: 99px;
	visibility: inherit;
}
#trans_walk_data_second, #trans_bus_data_second, #trans_taxi_data_second, #trans_train_data_second {
	position: absolute;
	top: 11px;
	left: 218px;
	visibility: inherit;
}
#trans_walk_data_third, #trans_bus_data_third, #trans_taxi_data_third, #trans_train_data_third {
	position: absolute;
	top: 29px;
	left: 99px;
	visibility: inherit;
}
#trans_walk_data_fourth, #trans_bus_data_fourth, #trans_taxi_data_fourth, #trans_train_data_fourth {
	position: absolute;
	top: 47px;
	left: 99px;
	visibility: inherit;
}
div#status_frame {
    position: relative;
    width: 217px;
    height: 182px;
}
div#status_time {
    position: absolute;
    top: 28px;
    left: 96px;
    visibility: inherit;
}
div#status_data_money {
    position: absolute;
    top: 69px;
    left: 55px;
    visibility: inherit;
}
div#status_data_point {
    position: absolute;
    top: 109px;
    left: 55px;
    visibility: inherit;
}
div#trans_window_box {
	position: absolute;
	top: 36px;
	left: 23px;
	visibility: inherit;
}
.trans_window_box {
	display:block;
	border-width: 0px;
	padding:0px;
	margin-top:0px;
	width:309px;
	height:256px;
	overflow:auto;
}
div#trans_window_box_r {
	position: absolute;
	top: 36px;
	left: 23px;
	visibility: inherit;
}
.trans_window_box_r {
	display:block;
	border-width: 0px;
	padding:0px;
	margin-top:0px;
	width:309px;
	height:306px;
	overflow:auto;
        overflow-x:hidden;
}
div#clue_window_s_shade_btn {
	position: absolute;
	top: 281px;
	left: 23px;
	visibility: inherit;
}
div#trans_window_s_shade_top {
    position: absolute;
    top: 36px;
    left: 23px;
    visibility: inherit;
}
div#trans_window_s_shade_top {
	position: absolute;
	top: 36px;
	left: 23px;
	visibility: inherit;
}
div#trans_window_s_shade_right {
	position: absolute;
	top: 36px;
	left: 305px;
	visibility: inherit;
}
div#trans_window_s_shade_btn {
	position: absolute;
	top: 331px;
	left: 23px;
	visibility: inherit;
}
div#clue_window_s_shade_top {
	position: absolute;
	top: 36px;
	left: 23px;
	visibility: inherit;
}
div#clue_window_s_shade_right {
	position: absolute;
	top: 36px;
	left: 305px;
	visibility: inherit;
}
div#clue_window_s_shade_btn {
	position: absolute;
	top: 281px;
	left: 23px;
	visibility: inherit;
}
div#trans_window_dest{
	position: absolute;
	top: 32px;
	left: 17px;
	visibility: inherit;
}
div#trans_window_dest_data{
	position: absolute;
	top: 53px;
	left: 98px;
	visibility: inherit;
}
.trans_window_dest_data {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #666;
	text-decoration: none;
}
div#message,div#message_confirm,div#message_win,div#message_lost{
    position: absolute;
    top: 60px;
    left: 95px;
    width: 232px;
    visibility: inherit;
}

div#message_window,div#message_window_confirm,div#message_win_window,div#message_lost_window{
    position:absolute;
    left:40%;
    margin-top:180px;
    z-index:26;
}

.message_data {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-style: normal;
    line-height: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    color: #666;
    text-decoration: none;
}

div#message_comfirm_ok{
	position: absolute;
	top: 130px;
	left: 204px;
	visibility: inherit;
}

div#message_comfirm_cancel{
	position: absolute;
	top: 130px;
	left: 261px;
	visibility: inherit;
}

div#message_info_ok{
	position: absolute;
	top: 130px;
	left: 270px;
	visibility: inherit;
}

div#level_window_data{
	position: absolute;
	top: 65px;
	left: 42px;
	visibility: inherit;
}

.level_window_data {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	line-height: normal;
	font-weight: bold;
	font-variant: normal;
	text-transform: none;
	color: #FFF;
	text-decoration: none;
}

div#status_player_image{
	position: absolute;
	top: 177px;
	left: 32px;
	visibility: inherit;
}

div#status_player_level{
	position: absolute;
	top: 199px;
	left: 73px;
	visibility: inherit;
}

.status_window_player_name{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-style: normal;
	line-height: normal;
	font-weight: bold;
	font-variant: normal;
	text-transform: none;
	color: #999;
	text-decoration: none;
}

div#status_player_name{
	position: absolute;
	top: 177px;
	left: 97px;
	visibility: inherit;
}

div#status_window_dot_1{
	position: absolute;
	top: 203px;
	left: 121px;
	visibility: inherit;
}

div#status_player_rank{
	position: absolute;
	top: 199px;
	left: 132px;
	visibility: inherit;
}

.status_window_player_data{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #999;
	text-decoration: none;
}

div#status_window_seperator{
	position: absolute;
	top: 262px;
	left: 55px;
	visibility: inherit;
}

div#status_competitor_image{
	position: absolute;
	top: 303px;
	left: 32px;
	visibility: inherit;
}

div#status_competitor_level{
	position: absolute;
	top: 325px;
	left: 73px;
	visibility: inherit;
}

div#status_competitor_name{
	position: absolute;
	top: 303px;
	left: 97px;
	visibility: inherit;
}

div#status_window_dot_2{
	position: absolute;
	top: 329px;
	left: 121px;
	visibility: inherit;
}

div#status_competitor_rank{
	position: absolute;
	top: 325px;
	left: 132px;
	visibility: inherit;
}

div#clue_window_unlock_panel{
	position: absolute;
	top: 292px;
	left: 23px;
	visibility: inherit;
}

div#clue_purchase_message{
	position: absolute;
	top: 312px;
	left: 53px;
	visibility: inherit;
}

.clue_purchase_message{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #666;
	text-decoration: none;
}

div#clue_unlock_btn{
	position: absolute;
	top: 310px;
	left: 263px;
	visibility: inherit;
}
div#acct_player_image{
	position: absolute;
	top: 53px;
	left: 39px;
	visibility: inherit;
}
div#acct_player_name{
	position: absolute;
	top: 53px;
	left: 104px;
	visibility: inherit;
}
.acct_window_player_name{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-style: normal;
	line-height: normal;
	font-weight: bold;
	font-variant: normal;
	text-transform: none;
	color: #999;
	text-decoration: none;
}
.acct_window_player_data{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #999;
	text-decoration: none;
}
div#acct_player_level{
	position: absolute;
	top: 75px;
	left: 78px;
	visibility: inherit;
}
div#acct_window_dot_1{
	position: absolute;
	top: 86px;
	left: 129px;
	visibility: inherit;
}

div#acct_player_level_num{
	position: absolute;
	top: 82px;
	left: 140px;
	visibility: inherit;
}
div#acct_window_dot_2{
	position: absolute;
	top: 106px;
	left: 129px;
	visibility: inherit;
}

div#acct_player_points{
	position: absolute;
	top: 102px;
	left: 140px;
	visibility: inherit;
}
div#acct_window_dot_3{
	position: absolute;
	top: 126px;
	left: 129px;
	visibility: inherit;
}

div#acct_player_rank{
	position: absolute;
	top: 122px;
	left: 140px;
	visibility: inherit;
}
div#acct_player_friends{
	position: absolute;
	top: 208px;
	left: 183px;
	visibility: inherit;
}